<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <link rel="stylesheet" href="css/amazeui.css"/>
    <link rel="stylesheet" href="css/registerInfo.css"/>


</head>
<body>
<div class="main-content">
    <form action="" id="registerInfoForm" method="post">
        <section class="reg-info-avatar">
            <img id="photo-image1" src="images/touxiang-bg.png" alt=""/>
            <input class="user-avatar-input photo1" type="file" name="user-avatar" onchange="previewImage(this,1)">
        </section>
        <section class="reg-info-sex">
            <input type="radio" id="male" checked="checked" name="sex" value="男">
            <label name="male" class="checked" for="male">男</label>
            <input type="radio" id="female" name="sex" value="女">
            <label name="female" for="female">女</label>
        </section>
        <section class="reg-info-input">
            <div class="input-items-box">
                <aside class="item-left item-input-left-title1"><span class="reg-info-icon1"></span>昵称</aside>
                <aside class="item-right">
                    <input type="text" id="name-input" placeholder="请输入昵称"/>
                </aside>
            </div>
            <div class="input-items-box">
                <aside class="item-left item-input-left-title2">
                    <span class="reg-info-icon2"></span>月收入
                </aside>
                <aside class="item-right">
                    <select class="edit-items-inputs" name="yueshouru" id="edit-yueshouru">
                        <option value="2000元以下">2000元以下</option>
                        <option value="2000-5000元">2000-5000元</option>
                        <option value="5000-10000元">5000-10000元</option>
                        <option value="10000-15000元">10000-15000元</option>
                        <option value="15000-20000元">15000-20000元</option>
                        <option value="20000-25000元">20000-25000元</option>
                        <option value="25000元以上">25000元以上</option>
                    </select>
                </aside>
            </div>
            <div class="input-items-box">
                <aside class="item-left item-input-left-title3">
                    <span class="reg-info-icon3"></span>工作生活在
                </aside>
                <aside class="item-right">
                    <select class="edit-items-inputs" name="suozaidi" id="edit-suozaidi">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>

                        <option value="重庆">重庆</option>
                        <option value="天津">天津</option>
                        <option value="广东">广东</option>
                        <option value="江苏">江苏</option>

                        <option value="浙江">浙江</option>
                        <option value="四川">四川</option>
                        <option value="福建">福建</option>
                        <option value="山东">山东</option>

                        <option value="湖北">湖北</option>
                        <option value="河北">河北</option>
                        <option value="山西">山西</option>
                        <option value="内蒙古">内蒙古</option>

                        <option value="辽宁">辽宁</option>
                        <option value="吉林">吉林</option>
                        <option value="黑龙江">黑龙江</option>
                        <option value="安徽">安徽</option>

                        <option value="江西">江西</option>
                        <option value="河南">河南</option>
                        <option value="湖南">湖南</option>
                        <option value="广西">广西</option>

                        <option value="海南">海南</option>
                        <option value="贵州">贵州</option>
                        <option value="云南">云南</option>
                        <option value="西藏">西藏</option>

                        <option value="陕西">陕西</option>
                        <option value="甘肃">甘肃</option>
                        <option value="青海">青海</option>
                        <option value="宁夏">宁夏</option>

                        <option value="新疆">新疆</option>
                    </select>
                </aside>
            </div>
        </section>
        <section class="reg-info-submit-button">
            <input type="button" id="submit-button" value="提交"/>
        </section>
    </form>
</div>


<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script>
    //图片预览功能
    function previewImage(file, imgNum) {
        var MAXWIDTH = 80;
        var MAXHEIGHT = 80;
        if (file.files && file.files[0]) {
            var img = document.getElementById('photo-image' + imgNum + '');
            var reader = new FileReader();
            reader.onload = function (evt) {
                img.src = evt.target.result;
            };
            reader.readAsDataURL(file.files[0]);
        }
    }
    $(function () {
        //性别单选
        $('label').click(function () {
            var radioId = $(this).attr('name');
            $('label').removeAttr('class') && $(this).attr('class', 'checked');
            $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
        });
        //提交验证
        $("#submit-button").click(function(){
            if($("#name-input").val()==""){
                alert('昵称不能为空');
            }else{
                $("#registerInfoForm").submit();
            }
        })
    });

</script>
</body>
</html>